<!-- 自定义TabBar组件，直接在tabBar页面中引入即可应用，会自动根据pages.json的配置生成tabBar，并且根据当前页面的路径自动选中对应的tab -->
<template>
  <div class="tab-bar">
    <div class="tab-bar-border" />
    <div
      v-for="(item, index) in list"
      :key="index"
      class="tab-bar-item"
      @click="clickTab(item.pagePath)"
    >
      <image
        :src="
          selected === index ? `/${item.selectedIconPath}` : `/${item.iconPath}`
        "
      />
      <view :style="{ color: selected === index ? selectedColor : color }">
        {{ item.text }}
      </view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { tabBar } from "@/pages.json";
import { useUser } from "@/stores/user";
import { subscribeMessage } from "@/utils/activity-202310-utils";
import { navigateTo } from "@/utils/navigate";
const user = useUser();
const selected = ref(0);
const { userInfo, isLogin } = storeToRefs(user);
onLoad(() => {
  const page = getCurrentPages().pop()?.route;
  const index = tabBar.list.findIndex((item) => item.pagePath === page);
  selected.value = index;
  console.log("onLoad", index);
});

const { list } = tabBar;
const color = tabBar.color || "#000";
const selectedColor = tabBar.selectedColor || "#000";

/** 点击tab
 * @param pagePath 页面路径
 */
const clickTab = (pagePath: string) => {
//   if (!isLogin.value) {
//     navigateTo("login");
//     return;
//   }
  subscribeMessage();
  const pageName = pagePath.split("/").pop() || "index";
  navigateTo(pageName);
};
</script>

<style scoped lang="scss">
.tab-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 98;

  height: $tabBarHeight;

  background: white;

  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
  display: flex;
}

.tab-bar-border {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background-color: rgb(0 0 0 / 33%);

  transform: scaleY(0.5);
}

.tab-bar-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.tab-bar-item image {
  width: 25px;
  height: 25px;
}

.tab-bar-item view {
  font-size: 10px;
}
</style>
